<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title> Big Image Sample - </title>
  <meta name="description" content="" />
  <meta property="og:title" content="Big Image Sample" />
  <meta name="twitter:title" content="Big Image Sample" />
  <meta name="description" content="Using Multiple Images">
  <meta property="og:description" content="Using Multiple Images">
  <meta name="twitter:description" content="Using Multiple Images">
  <meta name="twitter:card" content="summary" />
  <meta property="og:url" content="http://example.org/post/bigimg-sample/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="吴坤安的博客" />

  <meta name="generator" content="Hugo 0.76.4" />
  <link rel="canonical" href="http://example.org/post/bigimg-sample/" />
  <link rel="alternate" href="http://example.org/index.xml" type="application/rss+xml" title="吴坤安的博客">
  <script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
  
  <link rel="stylesheet" href="http://example.org/css/main.css" />
  <link rel="stylesheet" href="http://example.org/css/search.css" />
  
  





<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />



<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>

</head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://example.org/">吴坤安的博客</a>
    </div>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-right">
        

        

        
        
      </ul>
    </div>

    <div class="avatar-container">
      <div class="avatar-img-border">
        
      </div>
    </div>

  </div>
</nav>






    
  
  
  




  
    <div id="header-big-imgs" data-num-img=3 data-img-src-1="http://example.org/img/triangle.jpg" data-img-desc-1="Triangle"data-img-src-2="http://example.org/img/sphere.jpg" data-img-desc-2="Sphere"data-img-src-3="http://example.org/img/hexagon.jpg" data-img-desc-3="Hexagon"></div>
  

  <header class="header-section has-img">
    
      <div class="intro-header big-img">
        
        
        <div class="container">
          <div class="row">
              <div class="col-lg-12 col-md-12 col-md-offset-0">
                
                <div class="page-heading">
                
                  
                     <h1>Big Image Sample</h1>
                     
                     
                  
                  
                  
                    
                      <h2 align="center" class="post-subheading">Using Multiple Images</h2>
                    
                  
                  
                
              </div>
            </div>
          </div>
        </div>
        <span class="img-desc" style="display: inline;"></span>
      </div>
    
    <div class="intro-header no-img">
      
      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-md-offset-0">
            <div class="post-heading">
                <h1 align="center">Big Image Sample</h1>
                
                  
                    <h2 align="center" class="post-subheading">Using Multiple Images</h2>
                  
                
                
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>


    
<div class="container" role="main" itemscope itemtype="http://schema.org/Article">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            
            
            
<div>
    <section id="datecount">
        <h4 id="date"> Tue Mar 7, 2017</h4>
    </section>
    <h5 id="wc">200 Words|Read in about 1 Min</h5>
    <h5 id="tags">Tags: 
        
        <a href="http://example.org/tags/example/">example</a> &nbsp;
        
        <a href="http://example.org/tags/bigimg/">bigimg</a> &nbsp;
    </h5>
</div>

            
            <article role="main" class="blog-post" itemprop="articleBody" id="content">
                
  


                <p>The image banners at the top of the page are refered to as &ldquo;bigimg&rdquo; in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes.</p>
<p>A single bigimg can be specified in the front matter by the following YAML:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}]
</code></pre><p>Multiple bigimgs can be specified in the front matter by the following YAML:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}, 
         {src: &quot;/img/sphere.jpg&quot;, desc: &quot;Sphere&quot;}, 
         {src: &quot;/img/hexagon.jpg&quot;, desc: &quot;Hexagon&quot;}]
</code></pre><p>Also note that the description field is optional, and images could instead be specified by:</p>
<pre><code>bigimg: [{src: &quot;/img/triangle.jpg&quot;}, 
         {src: &quot;/img/sphere.jpg&quot;}, 
         {src: &quot;/img/hexagon.jpg&quot;}]
</code></pre><p>The above YAML array of hashes were written in &ldquo;flow&rdquo; style. However when generating a new page or post with <code>hugo new post/mypost.md</code>, hugo may interpret the archetype for bigimg in the default YAML style. Defining multiple bigimg&rsquo;s complete with descriptions in this style would be specified by:</p>
<pre><code>bigimg: 
- {src: &quot;/img/triangle.jpg&quot;, desc: &quot;Triangle&quot;}
- {src: &quot;/img/sphere.jpg&quot;, desc: &quot;Sphere&quot;}
- {src: &quot;/img/hexagon.jpg&quot;, desc: &quot;Hexagon&quot;}
</code></pre><p>Additional information can be found <a href="https://rhnh.net/2011/01/31/yaml-tutorial/">in this YAML tutorial</a>.</p>
            </article>

            <ul class="pager blog-pager">
                
                <li class="previous">
                    <a href="http://example.org/post/2017-03-05-math-sample/" data-toggle="tooltip" data-placement="top" title="Math Sample">&larr; Previous Post</a>
                </li>
                 
                <li class="next">
                    <a href="http://example.org/post/2017-03-20-photoswipe-gallery-sample/" data-toggle="tooltip" data-placement="top" title="Photoswipe Gallery Sample">Next Post &rarr;</a>
                </li>
                
            </ul>
            
            <div>
                 
                <h2>See Also</h2>
                <ul>
                    
                    <li><a href="/post/2017-03-05-math-sample/">Math Sample</a></li>
                    
                    <li><a href="/post/2016-03-08-code-sample/">Code Sample</a></li>
                    
                    <li><a href="/post/2015-02-20-test-markdown/">Test markdown</a></li>
                    
                </ul>
                
            </div>
            
            
            
            
<div>
    <section id="datecount">
        <h4 id="date"> Tue Mar 7, 2017</h4>
    </section>
    <h5 id="wc">200 Words|Read in about 1 Min</h5>
    <h5 id="tags">Tags: 
        
        <a href="http://example.org/tags/example/">example</a> &nbsp;
        
        <a href="http://example.org/tags/bigimg/">bigimg</a> &nbsp;
    </h5>
</div>

            
            </div>
            
            
        </div>
    </div>
    </section>
</div>

    <footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <ul class="list-inline text-center footer-links">
          
          
        </ul>
        <p class="credits copyright text-muted">
        &copy;2017-2018
          
          
          
            &nbsp;&bull;&nbsp;
            <a href="http://example.org/">吴坤安的博客</a>
          
        </p>

        
        <p class="credits theme-by text-muted">
          <a href="http://gohugo.io">Hugo v0.76.4</a> powered &nbsp;&bull;&nbsp; Theme by <a href="http://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a> adapted to <a href="https://github.com/rootsongjc/beautifulhugo">Beautiful Hugo</a>
          
        </p>
      </div>
    </div>
  </div>
</footer>


<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/bootstrap.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/photoswipe-ui-default.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/photoswipe.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/auto-render.min.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/main.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/prism.js"></script>
<script src="https://res.cloudinary.com/jimmysong/raw/upload/rootsongjc-hugo/katex.min.js"></script>
<script> renderMathInElement(document.body); </script>







  </body>
</html>

